<template>
  <view class="wine-cooler-setting">
    <view class="setting-cards">
      <SimpleSettingCard
        v-for="(setting, index) in settingGroups"
        :key="index"
        :name="(setting.name as string)"
        :value="(control.store[setting.field] as string | number)"
        :unit="setting.unit"
        @click="openSetting(setting)"
      />
    </view>

    <!-- 设置弹框 -->
    <Drawer v-model:show="settingModalVisible">
      <template #header>
        <view v-if="compartmentSetting" class="drawer-title-box">
          <text class="drawer-title">{{ compartmentSetting.name }}</text>
        </view>
      </template>

      <view v-if="compartmentSetting" class="setting-controls">
        <!-- 温度 -->
        <view class="setting-card">
          <view class="setting-title">
            <text class="setting-name">{{ $t('WineCooler.Compartment.Temperature.Text') }}</text>
            <text class="setting-unit" v-if="compartmentSetting.unit">({{ compartmentSetting.unit }})</text>
          </view>
          <view v-if="currentTemperature" class="setting-body number-control">
            <view class="decrease" :class="{ disabled: decreaseDisabled }" @click="decreaseTemp">
              <image class="mark-icon" src="/pages/appliance/static/ic_decrease_icon.png" />
            </view>
            <view class="num">{{ currentTemperature }}</view>
            <view class="increase" :class="{ disabled: increaseDisabled }" @click="increaseTemp">
              <image class="mark-icon" src="/pages/appliance/static/ic_add_icon.png" />
            </view>
          </view>
        </view>

        <!-- 湿度 -->
        <view class="setting-card">
          <view class="setting-body checkbox-control">
            <view
              v-for="option in humidityOptions"
              :key="option.value"
              class="checkbox-option"
              :class="{ active: currentHumidity === option.value }"
              @click="setHumidity(option.value)"
            >
              <text>{{ option.label }}</text>
            </view>
          </view>
        </view>
      </view>
    </Drawer>
  </view>
</template>

<script setup lang="ts">
import Drawer from '@/common/drawer.vue'
import { WineCoolerHumidity } from '@/constants/Command'
import { CompartmentType } from '@/controller/WineCooler'
import type { WineCoolerController } from '@/controller/WineCooler/definition'
import { actionDebounce, showLoading } from '@/utils/mpHelper'
import { useI18n } from 'vue-i18n'
import SimpleSettingCard from '../components/simpleSettingCard.vue'

const props = defineProps<{
  control: WineCoolerController.Control
}>()
const control = props.control
const i18n = useI18n()

type CompartmentSetting = { type: CompartmentType; name: string; field: keyof WineCoolerController.State; unit: string }
const settingGroups = computed(() => {
  const store = control.store
  const settings: CompartmentSetting[] = []

  // 上部变温室
  if (store.top_temperature !== null) {
    settings.push({
      type: CompartmentType.Top,
      name: i18n.t('WineCooler.Compartment.Top'),
      field: 'top_temperature',
      unit: store.temperatureUnit,
    })
  }

  // 中部变温室
  if (store.middle_temperature !== null) {
    settings.push({
      type: CompartmentType.Middle,
      name: i18n.t('WineCooler.Compartment.Middle'),
      field: 'middle_temperature',
      unit: store.temperatureUnit,
    })
  }

  // 下部变温室
  if (store.bottom_temperature !== null) {
    settings.push({
      type: CompartmentType.Bottom,
      name: i18n.t('WineCooler.Compartment.Bottom'),
      field: 'bottom_temperature',
      unit: store.temperatureUnit,
    })
  }

  return settings
})

/**
 * 打开设置弹框
 */
const settingModalVisible = ref(false)
const compartmentSetting = ref<CompartmentSetting | null>(null)
async function openSetting(setting: CompartmentSetting) {
  control.store.currentCompartmentType = setting.type
  compartmentSetting.value = setting
  await showLoading(() => control.store.loadCurrentCompartmentSetting())
  settingModalVisible.value = true
}

/**
 * 温度设置
 */
const currentTemperature = computed(() => control.store.currentCompartmentTemperature)
const decreaseDisabled = computed(() => {
  const tempSetting = control.store.currentTemperatureSetting
  if (!tempSetting?.constraints || !compartmentSetting.value) return true
  // 已是最小值 或 温度不可写入 禁止设置
  return tempSetting.constraints.min === currentTemperature.value || tempSetting.constraints.access === 'read'
})
const increaseDisabled = computed(() => {
  const tempSetting = control.store.currentTemperatureSetting
  if (!tempSetting?.constraints || !compartmentSetting.value) return true
  // 已是最大值 或 温度不可写入 禁止设置
  return tempSetting.constraints.max === currentTemperature.value || tempSetting.constraints.access === 'read'
})
const decreaseTemp = actionDebounce({
  delay: 500,
  call: () => control.store.decreaseCurrentTemperature(),
})
const increaseTemp = actionDebounce({
  delay: 500,
  call: () => control.store.increaseCurrentTemperature(),
})

/**
 * 湿度设置
 */
const humidityOptions = computed(() => [
  { label: i18n.t('WineCooler.Compartment.Humidity.Low'), value: WineCoolerHumidity.Low },
  { label: i18n.t('WineCooler.Compartment.Humidity.High'), value: WineCoolerHumidity.High },
])
const currentHumidity = computed(() => control.store.currentCompartmentHumidity)
const setHumidity = actionDebounce({
  delay: 500,
  call: (humidity: WineCoolerHumidity) => control.store.setCurrentHumidity(humidity),
})
</script>

<style scoped lang="less">
.setting-cards {
  padding: 0 32rpx;
}
.drawer-title-box {
  height: 56rpx;
  .drawer-title {
    font-weight: 600;
    font-size: 40rpx;
    color: var(--dark-color);
  }
}
.setting-card {
  background-color: #f4f4f6;
  padding: 24rpx 24rpx 32rpx;
  box-sizing: border-box;
  & + .setting-card {
    margin-top: 24rpx;
  }
  .setting-title {
    font-size: 28rpx;
    font-weight: 500;
    display: flex;
    align-items: flex-end;
    margin-bottom: 24rpx;
  }
  .setting-unit {
    font-size: 20rpx;
  }
  .disabled {
    pointer-events: none;
    opacity: 0.3;
  }
  .number-control {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .num {
      font-weight: 600;
      font-size: 56rpx;
      color: #408df2;
    }
    .mark-icon {
      width: 48rpx;
      height: 48rpx;
    }
  }
  .checkbox-control {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .checkbox-option {
      color: var(--dark-color);
      font-size: 32rpx;
      font-weight: 600;
      &.active {
        color: var(--primary-color);
      }
    }
  }
}
</style>
